<template>
    <el-menu
        :class="styles['header-menu']"
        :default-active="currentMenu"
        mode="horizontal"
        router
        @select="handleSelect"
    >
      <div :class="styles['logo']">
        <img :src="isDark ? LogoDark : Logo" alt="">
      </div>
      <h2 :class="styles['title']">卡乐仓库管理后台</h2>
      <el-menu-item v-for="(item) in menuList" :key="item.path" :index="item.path">{{ item.title }}</el-menu-item>
      <div :class="styles['info']">
        <el-dropdown trigger="click" @command="handleCommand">
        <span>
          Aa
          <el-icon>
            <arrow-down />
          </el-icon>
        </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item :command="item" v-for="item in sizeDropdownItems" :key="item.command" :disabled="currentSize === item.value">{{ item.label }}</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>

        <el-switch
            :class="styles['dark-toggle']"
            v-model="isDark"
            inline-prompt
            :active-icon="Moon"
            :inactive-icon="Sunny"
            @change="toggleDark"
        />
        <el-avatar :class="styles['avatar']" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"/>
      <el-dropdown trigger="click" @command="handleCommand">
        <span>
          Welcome 樱小淘
          <el-icon>
            <arrow-down />
          </el-icon>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item :command="item" v-for="item in userDropdownItems" :key="item.label">{{ item.label }}</el-dropdown-item>
          </el-dropdown-menu>
        </template>
        </el-dropdown>
      </div>
    </el-menu>
</template>

<script setup name="AppHeader">
import {ref} from 'vue'
import { ElMessage } from 'element-plus'
import { Sunny, Moon, ArrowDown } from '@element-plus/icons-vue'
import {useDark, useSize} from '@/hooks'
import { useRouter, useRoute } from 'vue-router'
import Logo from '@/assets/images/logo.png'
import LogoDark from '@/assets/images/logo-dark.png'

const router = useRouter()
const route = useRoute()

// 主题
const [isDark, toggleDark] = useDark()

// 字体大小
const [currentSize, toggleSize] = useSize()

// 菜单
const menuList =  [
  { path: '/', title: '入库' },
  { path: '/outStore', title: '出库' },
  { path: '/privateStore', title: '私人云仓' }
]

const currentMenu = ref(route.path)
const handleSelect = (key, keyPath) => {
  console.log(key, keyPath)
}

// 用户下拉菜单
const userDropdownItems = [
  { command: 'user_resetPasswork', label: '忘记/修改密码' },
  { command: 'user_exit', label: '退出' }
]

// 字体大小下拉菜单
const sizeDropdownItems = [
  { command: 'size_change', label: '大 - large', value: 'large' },
  { command: 'size_change', label: '中 - base', value: 'base' },
  { command: 'size_change', label: '小 - small', value: 'small' }
]

const CommandFunction = {
  // 重置密码
  user_resetPasswork:() => {
    ElMessage.success('重置密码成功')
  },
  // 退出
  user_exit: () => {
    ElMessage.success('退出成功')
    router.push('/login')
  },
  size_change: ({value}) => {
    toggleSize(value)
  }
}

// 用户操作
const handleCommand = (item) => {
  CommandFunction[item.command](item)
}

</script>

<style module="styles" lang="less" src="./index.less"></style>
